<template>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    style="color: red"
    title="系统设置"
    placement="right"
  >
    <h2>设置背景</h2>
    <a-radio-group
      v-model:value="navTheme"
      @change="handleChange"
    >
      <a-radio value="dark">黑色</a-radio>
      <a-radio value="light">白色</a-radio>
    </a-radio-group>

    <template v-slot:handle>
      <div class="handle" @click="visible = !visible">
        <SettingOutlined></SettingOutlined>
      </div>
    </template>
  </a-drawer>
</template>

<script setup>
  import { 
    SettingOutlined
  } from '@ant-design/icons-vue'

  import { ref } from 'vue'

  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()

  const visible = ref(false)

  const navTheme = ref(route.query.navTheme || 'dark')

  const handleChange = () => {
    router.push({
      ...route,
      query: {
        navTheme: navTheme.value
      }
    })
  }
</script>

<style lang="less" scoped>
.handle {
  position: absolute;
  top: 240px;
  right: 378px;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 16px;
  text-align: center;
  background: #1890ff;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  pointer-events: auto;
  color: #fff;
}
</style>
